<template>
  <div class="attention">
    <div class="title_nav">
      <h3 style="color:gray">好友列表</h3>
    </div>
    <div class="friend_list">
      <ul>
        <li>
          <span class="user"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-yaoqingjiaru'></use>
          </svg> 用户</span>
          <span class="state"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-kuozhan'></use>
          </svg> 当前状态</span>
          <span class="oper"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-shezhi'></use>
          </svg> 操作</span>
        </li>
        <li v-for="item in attentionData" :key="item.attentionid">
          <span class="user">
            <img :src="item.userinfo.picture" :alt="item.userinfo.name" :title="item.userinfo.name">
            {{item.userinfo.name}}
          </span>
          <span class="state">
            <i :class="item.isOnline ? 'green' : 'gray'"></i>
            <span :style="{'color': item.isOnline ? 'rgb(111, 253, 76)' : 'gray'}">
              {{item.isOnline ? '当前在线' : '离线中'}}
            </span>
          </span>
          <span class="oper">
            <div class="private" @click="user=item.userinfo">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-gengduocaozuo'></use>
              </svg><span>私信</span>
            </div>
            <div class="visit">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-jinru'></use>
              </svg><span>访问</span>
            </div>
            <div class="remove" @click="removeAttention(item.attentionid)">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-shanchu'></use>
              </svg><span>删除</span>
            </div>
          </span>
        </li>
        <li v-if="attentionData.length == 0">暂无好友</li>
      </ul>
      <private-letter :user="user" v-if="user"></private-letter>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import privateLetter from "./privateLetter.vue"
export default {
  name: 'Attention',

  data() {
    return {
      attentionData: [], // 展示好友数据
      user: null, // 要私信的好友
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getAttention().then(res => {
        if(res instanceof Object){
          this.attentionData = res.data
        }
      })
    },
    // 删除好友
    removeAttention(id){
      if(confirm('是否确认删除!')){
        this.$api.removeAttention({id}).then(res => {
          if(res == 1){
            this.showHint({title:'已删除!',isFlag:true})
            this.attentionData = this.attentionData.filter(v => v.attentionid != id)
          }
        })
      }
    },
    ...mapActions(['showHint'])
  },

  components: {
    privateLetter
  }
};
</script>

<style scoped>
.friend_list ul{
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid gray;
}
.friend_list ul li:first-child{
  background-color: green;
  color: white;
}
.friend_list ul li{
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: center;
}
.friend_list ul li > span{
  border-right: 1px solid gray;
  text-align: center;
}
.friend_list .oper{
  width: 200px;
}
.friend_list .state{
  width: 150px;
}
.friend_list li:first-child .user{
  color: white;
}
.friend_list .user{
  flex: 1;
  color: gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend_list .user img{
  width: 33px;
  height: 33px;
  border-radius: 50%;
  vertical-align: middle;
}
.friend_list .state i{
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: text-bottom;
}
.friend_list .state .green{
  background-color: rgb(111, 253, 76);
  box-shadow: 0 0 5px rgb(22, 228, 22);
}
.friend_list .state .gray{
  background-color: #ececec;
  box-shadow: 0 0 5px gray;
}
.friend_list .oper > div{
  display: inline-block;
  cursor: pointer;
  background-color: #ececec;
  padding: 6px;
  margin-right: 4px;
  color: gray;
  border-radius: 5px;
  transition: all .3s;
  line-height: 0;
}
.friend_list .oper .private:hover{
  background-color: rgb(0, 162, 255);
  color: white;
}
.friend_list .oper .remove:hover{
  background-color: red;
  color: white;
}
.friend_list .oper .visit:hover{
  background-color: rgb(54, 253, 54);
  color: white;
}
@media screen and (max-width: 800px){
  .friend_list .state{
    width: 100px;
  }
  .friend_list .oper{
    width: 160px;
  }
}
</style>